<template>
  <el-form :model="ruleForm" ref="ruleForm" :inline="false">

    <el-card class="box-card" shadow="never">
      <div slot="header" class="header-card">
        <span class="header-card-title">基础信息</span>
      </div>

      <div style="margin-bottom: 16px">
        <el-button size="mini" v-hasPermi="['bxlp:settlementList:derive']" @click="handleImport" type="primary">导入
        </el-button>

        <el-button size="mini" v-hasPermi="['bxlp:settlementList:derive']" @click="handleExport" type="primary">导出
        </el-button>
      </div>

      <el-table :data="ruleForm.tableData" border :header-cell-class-name="headerClass">

        <!--        <el-table-column label="操作" align="center" fixed="left" width="100">-->
        <!--          <template #default="{row}">-->
        <!--            <el-button size="mini" type="text" v-hasPermi="['demo:demo:remove']" @click="handleWork(row)">编辑-->
        <!--            </el-button>-->
        <!--          </template>-->
        <!--        </el-table-column>-->

        <el-table-column align="center" label="所属归属城市" show-overflow-tooltip prop="ascription" min-width="140"/>

        <el-table-column align="center" label="车牌号" show-overflow-tooltip prop="carNo" min-width="140"/>

        <el-table-column align="center" label="车架号" show-overflow-tooltip prop="vinNo" min-width="180"/>

        <el-table-column align="center" label="发动机号" show-overflow-tooltip prop="engineNo" min-width="180"/>

        <el-table-column align="center" label="车型" show-overflow-tooltip min-width="200">
          <template #default="{row}">
            {{ row.modelName ? '/' + row.modelName : '' }}
          </template>
        </el-table-column>

        <el-table-column align="center" label="座位数" show-overflow-tooltip min-width="200" prop="seatNum"/>

        <el-table-column align="center" label="合计费用" show-overflow-tooltip min-width="120" prop="amountMoney">
          <template #default="{row,$index}">
            <span>{{ handleCount(row, $index) }}</span>
          </template>
        </el-table-column>

        <!--交强险-->
        <el-table-column label="交强险" align="center">
          <el-table-column align="center" label="保险公司" show-overflow-tooltip min-width="180" prop="jqxCompany"/>

          <el-table-column align="center" label="交强险起保日" min-width="180" prop="jqxExpectBeginTime">
            <template #default="{row,$index}">
              <el-form-item class="formTable" :prop="'tableData.'+$index+'.jqxExpectBeginTime'"
                            :rules="{required: isEdit,trigger: 'change'}">
                <el-date-picker v-model="row.jqxExpectBeginTime" type="date" placeholder="请选择交强险起保日"
                                @change="changeData(ruleForm.tableData,row.jqxExpectBeginTime,$index,'jqxExpectEndTime')"
                                v-if="isEdit" value-format='yyyy-MM-dd' style="width: 100%;">
                </el-date-picker>
                <span v-else>{{ row.jqxExpectBeginTime }}</span>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column align="center" label="交强险到日" min-width="180" prop="jqxExpectEndTime">
            <template #default="{row,$index}">
              <el-form-item class="formTable" :prop="'tableData.'+$index+'.jqxExpectEndTime'"
                            :rules="{required: isEdit,trigger: 'change'}">
                <el-date-picker v-model="row.jqxExpectEndTime" type="date" placeholder="请选择交强险到日" v-if="isEdit"
                                value-format='yyyy-MM-dd' style="width: 100%;">
                </el-date-picker>
                <span v-else>{{ row.jqxExpectEndTime }}</span>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column align="center" label=" 性质" min-width="120">
            <template #default="{row}">
              <el-form-item class="formTable">
                <span>
                  {{ row.jqxInsuranceType == 1 ? '运营' : row.jqxInsuranceType == 2 ? '非运营' : '' }}
                </span>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column align="center" label="交强险保费" min-width="180" prop="jqxAmount">
            <template #default="{row,$index}">
              <el-form-item class="formTable" :prop="'tableData.'+$index+'.jqxAmount'"
                            :rules="{required: isEdit,trigger: 'blur'}">
                <el-input v-model="row.jqxAmount" v-if="isEdit" @change="changeTable( row, $index,'jqxAmount')"
                          placeholder="请输入交强险保费"></el-input>
                <span v-else>{{ row.jqxAmount }}</span>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column align="center" label="车船税是否缴纳" min-width="120">
            <template #default="{row}">
              <span v-if="row.carTaxStatus == '1' ">是</span>
              <span v-if="row.carTaxStatus == '2'">否</span>
            </template>
          </el-table-column>

          <el-table-column align="center" label="车船税费" min-width="160">
            <template #default="{row,$index}">
              <el-form-item class="formTable" :prop="'tableData.'+$index+'.carTax'"
                            :rules="{required: isEdit,trigger: 'blur'}">
                <el-input v-model="row.carTax" v-if="isEdit" @change="changeTable(row, $index,'carTax')"
                          placeholder="请输入车船税费"></el-input>
                <span v-else>{{ row.carTax }}</span>
              </el-form-item>
            </template>
          </el-table-column>

        </el-table-column>

        <!--商业险-->
        <el-table-column label="商业险" align="center">
          <el-table-column align="center" label="保险公司" show-overflow-tooltip min-width="180" prop="syxCompany"/>

          <el-table-column align="center" label="商业险起保日" min-width="180" prop="syxExpectBeginTime">
            <template #default="{row,$index}">
              <el-form-item class="formTable" :prop="'tableData.'+$index+'.syxExpectBeginTime'"
                            :rules="{required: isEdit,trigger: 'blur'}">
                <el-date-picker v-model="row.syxExpectBeginTime" type="date" placeholder="请选择商业险起保日"
                                v-if="isEdit"
                                @change="changeData(ruleForm.tableData,row.syxExpectBeginTime,$index,'syxExpectEndTime')"
                                value-format='yyyy-MM-dd' style="width: 100%;">
                </el-date-picker>
                <span v-else>{{ row.syxExpectBeginTime }}</span>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column align="center" label="商业险到日" min-width="180" prop="syxExpectEndTime">
            <template #default="{row,$index}">
              <el-form-item class="formTable" :prop="'tableData.'+$index+'.syxExpectEndTime'"
                            :rules="{required: isEdit,trigger: 'blur'}">
                <el-date-picker v-model="row.syxExpectEndTime" type="date" placeholder="请选择商业险到日" v-if="isEdit"
                                value-format='yyyy-MM-dd' style="width: 100%;">
                </el-date-picker>
                <span v-else>{{ row.syxExpectEndTime }}</span>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column align="center" label=" 性质" min-width="120">
            <template #default="{row}">
              <el-form-item class="formTable">
                <span>
                  {{ row.syxInsuranceType === '1' ? '运营' : row.syxInsuranceType === '2' ? '非运营' : '' }}
                </span>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column align="center" label="商业险保费" min-width="180" prop="syxAmount">
            <template #default="{row,$index}">
              <el-form-item class="formTable">
                <span>{{ handleSyxAmount(row, $index) }}</span>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table-column>

        <!--保险套餐-->
        <el-table-column label="保险套餐" align="center">
          <el-table-column align="center" label="车损险保额" width="180" prop="csxQuota"/>
          <el-table-column align="center" label="车损险保费" width="180" prop="csxPrice">
            <template #default="{row,$index}">
              <el-form-item class="formTable" :prop="'tableData.'+$index+'.csxPrice'"
                            :rules="{required: isEdit,trigger: 'blur'}">
                <el-input v-if="isEdit" v-model="row.csxPrice" placeholder="请输入车损险 保费"
                          @change="changeTable(row, $index, 'csxPrice')" size="mini"/>
                <span v-else>{{ row.csxPrice }}</span>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column align="center" label="三者险保额" width="180" prop="szxQuota"/>
          <el-table-column align="center" label="三者险保费" width="180" prop="szxPrice">
            <template #default="{row,$index}">
              <el-form-item class="formTable" :prop="'tableData.'+$index+'.szxPrice'"
                            :rules="{required: isEdit,trigger: 'blur'}">
                <el-input v-if="isEdit" v-model="row.szxPrice" placeholder="请输入三者险 保费"
                          @change="changeTable(row, $index, 'szxPrice')" size="mini"/>
                <span v-else>{{ row.szxPrice }}</span>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column align="center" label="乘客保险保额" width="180" prop="ckQuota"/>
          <el-table-column align="center" label="乘客保险保费" width="180" prop="ckPrice">
            <template #default="{row,$index}">
              <el-form-item class="formTable" :prop="'tableData.'+$index+'.ckPrice'"
                            :rules="{required: isEdit,trigger: 'blur'}">
                <el-input v-if="isEdit" v-model="row.ckPrice" placeholder="请输入乘客保险 保费"
                          @change="changeTable(row, $index, 'ckPrice')" size="mini"/>
                <span v-else>{{ row.ckPrice }}</span>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column align="center" label="驾驶员险额" width="180" prop="jsyQuota"/>
          <el-table-column align="center" label="驾驶员保险费" width="180" prop="jsyPrice">
            <template #default="{row,$index}">
              <el-form-item class="formTable" :prop="'tableData.'+$index+'.jsyPrice'"
                            :rules="{required: isEdit,trigger: 'blur'}">
                <el-input v-if="isEdit" v-model="row.jsyPrice" placeholder="请输入驾驶员险额"
                          @change="changeTable(row, $index, 'jsyPrice')" size="mini"/>
                <span v-else>{{ row.jsyPrice }}</span>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column align="center" label="划痕险保额" width="180" prop="hhxQuota"/>
          <el-table-column align="center" label="划痕险保险费" width="180" prop="hhxPrice">
            <template #default="{row,$index}">
              <el-form-item class="formTable" :prop="'tableData.'+$index+'.hhxPrice'"
                            :rules="{required: isEdit,trigger: 'blur'}">
                <el-input v-if="isEdit" v-model="row.hhxPrice" placeholder="请输入划痕险 保费"
                          @change="changeTable(row, $index, 'hhxPrice')" size="mini"/>
                <span v-else>{{ row.hhxPrice }}</span>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column align="center" label="增值服务特约险" width="180" prop="zzfwQuota"/>
          <el-table-column align="center" label="增值服务特约险保费" width="180" prop="zzfwPrice">
            <template #default="{row,$index}">
              <el-form-item class="formTable" :prop="'tableData.'+$index+'.zzfwPrice'"
                            :rules="{required: isEdit,trigger: 'blur'}">
                <el-input v-if="isEdit" v-model="row.zzfwPrice" placeholder="请输入增值服务特约险"
                          @change="changeTable(row, $index, 'zzfwPrice')" size="mini"/>
                <span v-else>{{ row.zzfwPrice }}</span>
              </el-form-item>
            </template>
          </el-table-column>

          <!-- <el-table-column align="center" label="车轮单独损失险" width="180" prop="clQuota"/>
          <el-table-column align="center" label="车轮单独损失险保费" width="180" prop="clPrice">
            <template #default="{row,$index}">
              <el-form-item class="formTable" :prop="'tableData.'+$index+'.clPrice'"
                            :rules="{required: isEdit,trigger: 'blur'}">
                <el-input v-if="isEdit" v-model="row.clPrice" placeholder="请输入车轮单独损失险"
                          @change="changeTable(row, $index, 'clPrice')" size="mini"/>
                <span v-else>{{ row.clPrice }}</span>
              </el-form-item>
            </template>
          </el-table-column>

          <el-table-column align="center" label="外部电网附加险" width="180" prop="wbdwQuota"/>
          <el-table-column align="center" label="外部电网附加险保费" width="180" prop="wbdwPrice">
            <template #default="{row,$index}">
              <el-form-item class="formTable" :prop="'tableData.'+$index+'.wbdwPrice'"
                            :rules="{required: isEdit,trigger: 'blur'}">
                <el-input v-if="isEdit" v-model="row.wbdwPrice" placeholder="请输入外部电网附加险"
                          @change="changeTable(row, $index, 'wbdwPrice')" size="mini"/>
                <span v-else>{{ row.wbdwPrice }}</span>
              </el-form-item>
            </template>
          </el-table-column> -->

          <el-table-column align="center" label="其他险种备注" width="180" prop="qtQuota"/>
          <el-table-column align="center" label="其他险种保费" width="180" prop="qtPrice">
            <template #default="{row,$index}">
              <el-form-item class="formTable">
                <el-input v-if="isEdit" v-model="row.qtPrice" @change="changeTable(row, $index, 'qtPrice')"
                          placeholder="请输入驾驶员险额" size="mini"/>
                <span v-else>{{ row.qtPrice }}</span>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table-column>

        <!--其他险种-->
        <el-table-column label="其他险种" align="center">
          <el-table-column align="center" label="其他险备注" width="180" prop="otherInsuranceRemark"/>
          <el-table-column align="center" label="其他险种保费" width="180" prop="otherInsuranceSumAmount">
            <template #default="{row,$index}">
              <el-form-item class="formTable">
                <el-input v-if="isEdit" v-model="row.otherInsuranceSumAmount" placeholder="请输入驾驶员险额"
                          @change="changeTable(row, $index, 'otherInsuranceSumAmount')" size="mini"/>
                <span v-else>{{ row.otherInsuranceSumAmount }}</span>
              </el-form-item>
            </template>
          </el-table-column>
        </el-table-column>

      </el-table>

    </el-card>
  </el-form>
</template>

<script>
import * as app from "@/api/app.js";
import {ImportFile} from "@/api/cwgd/renewal.js";

export default {
  name: "hojiOffer", //保司报价
  props: {
    value: {
      type: Object,
      default: {},
    },
    state: {
      type: String,
      default: "",
    },
  },
  computed: {
    ruleForm: {
      get() {
        let that = this;
        const proxy = new Proxy(that.value, {
          get(target, key) {
            return Reflect.get(target, key);
          },
          set(target, key, value) {
            that.$emit("input", {...target, [key]: value});
            return true;
          },
        });
        return proxy;
      },
    },
    isEdit() {
      let bool;
      switch (this.state) {
        case "write":
          bool = true;
          break;
        case "disabled":
          bool = false;
          break;
        case "readonly":
          bool = false;
          break;
      }
      return bool;
    },
    templateFileUrl() {
      return `${app.templateUrl}renewal_template`;
    },
  },
  watch: {},
  data() {
    return {
      headerStar: [],
      bool: false,
      activityName: "",
      formId: "",
    };
  },
  created() {
  },
  mounted() {
  },
  methods: {
    handleCount(val, index) {
      let num = 0;
      num =
          Number(val.jqxAmount) +
          Number(val.carTax) +
          Number(val.csxPrice) +
          Number(val.szxPrice) +
          Number(val.ckPrice) +
          Number(val.jsyPrice) +
          Number(val.hhxPrice) +
          Number(val.zzfwPrice) +
          Number(val.qtPrice) +
          Number(val.otherInsuranceSumAmount);

      this.$set(this.value.tableData[index], 'amountMoney', num)
      return num;
    },

    handleSyxAmount(val, index) {
      let num = 0;
      num =
          Number(val.csxPrice) +
          Number(val.szxPrice) +
          Number(val.ckPrice) +
          Number(val.jsyPrice) +
          Number(val.hhxPrice) +
          Number(val.zzfwPrice) +
          Number(val.qtPrice)
      this.$set(this.value.tableData[index], 'syxAmount', num)
      return num;
    },


    changeData(list, time, i, key) {
      let timeDate = this.addOneMonth(time, 12);
      this.$set(this.ruleForm.tableData, i, {
        ...this.ruleForm.tableData[i],
        [key]: timeDate,
      });
    },

    addOneMonth(dateString, month) {
      const date = new Date(dateString);
      date.setMonth(date.getMonth() + Number(month));
      date.setDate(date.getDate() - 1);
      return date.toISOString().split("T")[0]; // 返回YYYY-MM-DD格式的日期字符串
    },

    headerClass({row, column, rowIndex, columnIndex}) {
      for (let i = 0; i < row.length; i++) {
        if (this.headerStar.includes(row[i].property) && i == columnIndex) {
          return "header-class";
        }
      }
    },

    handleWork() {
    },

    handleExport() {
      this.download_json(
          "/car/insurance/renewalExportList",
          this.ruleForm.tableData,
          `保司报价列表_${new Date().getTime()}.xlsx`
      );
    },

    handleImport() {
      this.$UploadDialog({
        showtoastSureBtn: false,
        showResult: false,
        showErrorFeedback: false,
        uploadConfig: {
          uploadFileUrl: `#${ImportFile}`,
          limit: 1,
          fileType: ["xlsx"],
          templateUrl: this.templateFileUrl,
          templateName: `续保-导入模版.xlsx`,
        },
      }).then((res) => {
        let tableData = res || [];
        for (let i = 0; i < this.value.tableData.length; i++) {
          let index = tableData.findIndex(
              (item) => item.vinNo === this.value.tableData[i].vinNo
          );
          if (index !== -1) {
            for (let key in tableData[index]) {
              this.$set(this.value.tableData[i], key, tableData[index][key]);
            }
            if (this.value.tableData[i].carTaxStatus === "是") {
              this.value.tableData[i].carTaxStatus = 1;
            }
            if (this.value.tableData[i].carTaxStatus === "否") {
              this.value.tableData[i].carTaxStatus = 2;
            }

            if (this.value.tableData[i].jqxInsuranceType === "运营") {
              this.value.tableData[i].jqxInsuranceType = 1;
            }
            if (this.value.tableData[i].jqxInsuranceType === "非运营") {
              this.value.tableData[i].jqxInsuranceType = 2;
            }

            if (this.value.tableData[i].syxInsuranceType === "运营") {
              this.value.tableData[i].syxInsuranceType = 1;
            }
            if (this.value.tableData[i].syxInsuranceType === "非运营") {
              this.value.tableData[i].syxInsuranceType = 2;
            }
          }
        }
      });
    },

    // 店保金额格式
    changeTable(row, key, field) {
      let msg = /^(?:[1-9]\d*|0)(?:\.\d+)?$/;

      if (msg.test(Number(row[field]))) {
        if (Number(row[field]) >= 0) {
          let _value = row[field].toString().match(/^\d+(?:\.\d{0,2})?/)[0];
          row[field] = _value;
        } else {
          row[field] = "";
        }
      } else {
        row[field] = "";
      }
      // this.addAmountNun = this.addAmount(this.ruleForm.carMaintainProjectList, 'price')
    },

    valid() {
      return new Promise((resolve) => {
        this.$refs.ruleForm.validate((valid) => {
          resolve(valid);
        });
      });
    },
  },
};
</script>

<style scoped lang="scss">
.el-form {
  ::v-deep.formTable {
    margin-bottom: 0;
  }
}

.box-card {
  font-size: 14px;
  margin-bottom: 16px;
}

::v-deep .header-class {
  .cell::before {
    content: "*";
    color: red;
    padding-right: 2px;
    font-size: 14px;
  }
}
</style>


